<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>

        .static{
            width:150px;
            height:150px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: red;
        }
        .b{
            border:3px solid blue;
        }
        .c{
            border-radius: 50%;
        }
        .main{
            width:420px;
            overflow: hidden;
            padding: 20px 10px;
            box-sizing: border-box;
            background: #f4f4f4;
            border-radius: 10px;
            height:420px;
            display: flex;
            flex-direction: column;
        }
        .nav{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .nav-item{
            width:120px;
            height:40px;
            background: brown;
            border-radius: 6px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .nav .active{
            background: #0f0;
            color:crimson;
            font-size: 20px;
        }
        .content{
            flex:1;
            width:100%;
            margin-top:20px;
            overflow: hidden;
        }
        .content-item{
            width:100%;
            height:100%;
            border-radius: 6px;
            background: darkmagenta;
            color:#fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="msg">{{msg}}</h2>
        <p>
            <input type="text" v-model.lazy.number.trim="word" placeholder="edit me ">
        </p>
        <p>word == {{word}}</p>
        <div>
            <label for="box">
                <input id="box" type="checkbox" v-model="agree" > 请你先同意我们的霸王条款...
            </label>
            <p>agree : {{ agree}}</p>
        </div>
        <div>
            <input type="checkbox" id="book" value="Book" v-model="checkedNames">
            <label for="book">阅读</label>
            <input type="checkbox" id="game" value="Game" v-model="checkedNames">
            <label for="game">游戏</label>
            <input type="checkbox" id="yun" value="Yun" v-model="checkedNames">
            <label for="yun">运动</label>
            <p>
                checkedNames : {{ checkedNames }}
            </p>
        </div>
        <div>
            <input type="radio" id="male" value="Male" v-model="picked">
            <label for="male">男性</label>
            <br>
                <input type="radio" id="female" value="Female" v-model="picked">
                <label for="female">女性</label>
            <br>
            <p>
                picked : {{ picked }}
            </p>
        </div>
        <div>
            <h2>身份确定</h2>
            <select v-model="selected">
                <option :value="l.value"   v-for="(l,i) in roles" :key="i">
                    {{l.text }}
                </option>
            </select>
            <p>
                selected: {{selected}}
            </p>
        </div>
        <div>
            <p>值绑定</p>
            <input 
                type="checkbox" 
                v-model="toggle" 
                :true-value="yes"
                :false-value="no"
            >

            <p>toggle : {{toggle}}</p>

            <div>
                <p><input type="radio" v-model="pick" :value="a">猫</p>
                <p><input type="radio" v-model="pick" :value="b">狗</p>
                <p><input type="radio" v-model="pick" :value="c">猪</p>
                <p>
                    你喜欢的动物  : {{pick}}
                </p>
            </div>
        </div>
    </div>
    <script>



        const vm = new Vue({

            data:{
                msg:"v-model 数据的双向绑定",
                word:"wh2107-daydayup",
                agree:true,
                checkedNames:[],
                picked:'Male',
                selected:"",
                roles:[{
                    value:"0",
                    text:"普通用户"
                },{
                    value:"1",
                    text:"会员"
                },
                {
                    value:"2",
                    text:"超级会员"
                },
                {
                    value:"3",
                    text:"至尊会员"
                }],
                toggle:true,
                yes:"今天认真看电影",
                no:"今天晚上我要打游戏...",
                pick:"Cat",
                a:'Cat',
                b:"Dog",
                c:"Pig"
            },
            methods:{

            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
            }
        }).$mount("#app")

        var user = {
            username:"zuozuomu",
            age:28
        }
        // Object.defineProperty
        // Object.defineProperties 
        Object.defineProperty(user,"username",{
            get(){
                // 获取值
                console.log("你读取了username --- " + user.uesrname)
            },
            set(v){
                // 监听  
                console.log('你修改了 user 里面的username --'+ v)
            }
        })

    </script>
     <!-- 

        v-model  用于绑定 input 和 textarea 的 value  输入框 

        语法糖

        它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理


        v-model 实现数据双向绑定
        view  视图层   修改视图(input 事件)  v-model 会自动去更新对应的 数据(model)
        model 数据层   修改数据  通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)

        Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点
        
        设计模式   
        MVC        angularJS  
        M  model 数据层
        V  view  视图层
        C  controller 控制器层   

        MVVM   
        M  model 数据层
        V  views 视图层
        VM viewmodel  数据视图对象  

        MVP  
        M  model 数据层
        V  views 视图层
        P  presenter  逻辑层  (js逻辑处理代码+方法)

        v-model 的底层原理   语法糖
        Object.defineProperty()  进行数据劫持  (监听数据改变 从而触发修改视图的逻辑函数)  (监听输入框输入事件 从而修改对应的数据)

        它会根据控件类型自动选取正确的方法来更新元素  
        v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
        负责监听用户的输入事件以更新数据
        
        text 和 textarea 元素使用 value 属性和 input 事件
        checkbox 和 radio 使用 checked 属性和 change 事件
        select 字段将 value 作为 prop 并将 change 作为事件   $("#select").prop()

        v-model 也有修饰符 
        lazy    input 变为 change 延迟触发 
        trim    去除首尾空格
        number  用户的输入值转为数值类型
    -->
</body>
</html>